<template>
  <div class="layout-setting p-24 t-light bd-filt bgc-white">
    <div class="d-flex al-center mb-24">
      <div class="label">X</div>
      <el-input-number
        :value="style.left"
        :step="1"
        step-strictly
        :min="0"
        :max="previewer.width - style.width"
        :disabled="!isLayeredComponent(model)"
        :controls="false"
        size="small"
        @change="(val) => (style.left = val)"
      />
      <div class="label ml-24">Y</div>
      <el-input-number
        :value="style.top"
        :step="1"
        step-strictly
        :min="0"
        :max="previewer.height - style.height"
        :disabled="!isLayeredComponent(model)"
        :controls="false"
        size="small"
        @change="(val) => (style.top = val)"
      />
      <span v-if="origin" class="ml-24 t-theme pointer" @click="onReset">重置</span>
    </div>
    <div class="d-flex al-center">
      <div class="label">W</div>
      <el-input-number
        :value="style.width"
        :step="1"
        step-strictly
        :min="1"
        :max="previewer.width - style.left"
        :disabled="!isLayeredComponent(model)"
        :controls="false"
        size="small"
        @change="(val) => (style.width = val)"
      />
      <div class="label ml-24">H</div>
      <el-input-number
        :value="style.height"
        :step="1"
        step-strictly
        :min="1"
        :max="previewer.height - style.top"
        :disabled="!isLayeredComponent(model)"
        :controls="false"
        size="small"
        @change="(val) => (style.height = val)"
      />
      <div
        v-if="model.hasOwnProperty('lock') && showLock"
        class="btn btn-lock ml-16 pointer"
        :class="{ locking: model.lock }"
        @click="model.lock = !model.lock"
      ></div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';

  export default {
    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      },
      disabled: { type: Boolean, default: false },
      showLock: { type: Boolean, default: true }
    },

    computed: {
      ...mapGetters('component', ['previewer', 'isLayeredComponent']),
      style() {
        return this.model.style;
      },
      origin() {
        return this.model.origin;
      }
    },

    methods: {
      onReset() {
        this.model.style.width = this.origin.width;
        this.model.style.height = this.origin.height;
        this.model.style.top = this.origin.top;
        this.model.style.left = this.origin.left;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .layout-setting ::v-deep {
    .label {
      width: 24px;
      text-align: center;
    }

    .el-input-number--small .el-input {
      .el-input__inner {
        border-color: map-get($bgColors, 'lightgrey');
        background-color: map-get($bgColors, 'lightgrey');

        &:focus {
          border-color: map-get($bdColors, 'theme');
          background-color: map-get($bgColors, 'white');
        }
      }
    }
  }
</style>
